<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>cesium</title>
    <link rel="stylesheet" href="http://jrain.oscitas.netdna-cdn.com/tutorial/css/fontawesome-all.min.css">
    <script src="js/jquery-3.4.1.min.js"></script>

    <script src="js/require.js"></script>
    <script src="js/Cesium.js"></script>
    <script src="js/Sandcastle-header.js"></script>
    <style>
        @import url(css/widgets.css);

        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>

</head>
<div id="credit"></div>
<body>

<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>

<script>
    startup()

    // socket 开始
    var websocket = null;
    if ('WebSocket' in window) {
        console.log("cesium-socket 开始...");
        //建立webSocket连接
        websocket = new WebSocket('ws://localhost:8080/websocket');
    } else {
        alert('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        console.log("cesium-WebSocket连接发生错误")
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        console.log("cesium-WebSocket连接成功")
        setMessageInnerHTML("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        console.log("cesium-接收到==>" + event.data)
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        // console.log("")
        // document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }

    // socket 结束

    function startup() {
        var view = new Cesium.Viewer('cesiumContainer', {
            baseLayerPicker: false,
            timeline: true,
            homeButton: false,
            fullscreenButton: false,
            infoBox: false,
            sceneModePicker: false,
            navigationInstructionsInitiallyVisible: false,
            navigationHelpButton: false,
            shouldAnimate: true
        });

        view.scene.globe.enableLighting = true;

        //
        var d = new Date();
        var hour = 0 - d.getTimezoneOffset();
        view.animation.viewModel.timeFormatter = function (date, viewModel) {
            var dateZone8 = Cesium.JulianDate.addMinutes(date, hour, new Cesium.JulianDate());
            var gregorianDate = Cesium.JulianDate.toGregorianDate(dateZone8);
            var millisecond = Math.round(gregorianDate.millisecond);
            if (Math.abs(viewModel._clockViewModel.multiplier) < 1) {
                return Cesium.sprintf("%02d:%02d:%02d.%03d;", gregorianDate.hour, gregorianDate.minute, gregorianDate.second);
            }
            return Cesium.sprintf("%02d:%02d:%02d GMT+8", gregorianDate.hour, gregorianDate.minute, gregorianDate.second);
        };


        let data = [];

        data[0] = [
            {
                longitude: 116.405419,
                dimension: 39.918034,
                height: 0,
                time: 0
            }, {
                longitude: 116.385419,
                dimension: 39.918034,
                height: 0,
                time: 100
            }]
        data[1] = [
            {longitude: 116.405419, dimension: 39.918034, height: 0, time: 0},
            {longitude: 116.385419, dimension: 39.918034, height: 0, time: 100}
        ]
        data[2] = [
            {longitude: 116.405419, dimension: 39.918034, height: 0, time: 0},
            {
                longitude: 116.385419,
                dimension: 39.918034,
                height: 70000,
                time: 100
            }
        ]
        /*
                        data[0] = [{longitude: 116.405419, dimension: 39.918034, height: 0, time: 0}, {
                            longitude: 116.2821,
                            dimension: 39.918145,
                            height: 0,
                            time: 40
                        }, {longitude: 115.497402, dimension: 39.344641, height: 70000, time: 100}, {
                            longitude: 107.942392,
                            dimension: 29.559967,
                            height: 70000,
                            time: 280
                        }, {longitude: 106.549265, dimension: 29.559967, height: 0, time: 360}];
                        data[1] = [{longitude: 116.405419, dimension: 39.918034, height: 0, time: 0}, {
                            longitude: 117.034586,
                            dimension: 39.881202,
                            height: 0,
                            time: 40
                        }, {longitude: 116.340088, dimension: 38.842224, height: 70000, time: 100}, {
                            longitude: 113.489176,
                            dimension: 23.464017,
                            height: 70000,
                            time: 280
                        }, {longitude: 113.262084, dimension: 23.13901, height: 0, time: 360}];
                        data[2] = [{longitude: 118.838979, dimension: 32.073514, height: 0, time: 0}, {
                            longitude: 118.438838,
                            dimension: 32.03777,
                            height: 0,
                            time: 40
                        }, {longitude: 117.802406, dimension: 31.91231, height: 70000, time: 100}, {
                            longitude: 104.043645,
                            dimension: 35.993845,
                            height: 70000,
                            time: 280
                        }, {longitude: 101.807224, dimension: 36.660972, height: 0, time: 360}];
        */

        // console.log("----> "+ Cesium.JulianDate.fromDate(new Date()))

        // 起始时间
        let start = Cesium.JulianDate.fromDate(new Date());
        // 结束时间
        let stop = Cesium.JulianDate.addSeconds(start, 100, new Cesium.JulianDate());
        // 设置始时钟始时间
        view.clock.startTime = start.clone();
        // 设置时钟当前时间
        view.clock.currentTime = start.clone();
        // 设置始终停止时间
        view.clock.stopTime = stop.clone();
        // 时间速率，数字越大时间过的越快
        view.clock.multiplier = 5;
        // 时间轴
        view.timeline.zoomTo(start, stop);
        // 循环执行,即为2，到达终止时间，重新从起点时间开始
        view.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

        // 镜头飞跃
        view.camera.flyTo({  //116.405419,39.918034
            destination: Cesium.Cartesian3.fromDegrees(116.405419, 39.918034, 10000)
        })

        for (let j = 0; j < data.length; j++) {
            let property = computeFlight(data[j]);
            console.log("cesium-property ==> " + property)
            // 添加模型
            let planeModel = view.entities.add({
                // 和时间轴关联
                availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                    start: start,
                    stop: stop
                })]),
                position: property,
                // 根据所提供的速度计算模型的朝向
                orientation: new Cesium.VelocityOrientationProperty(property),
                // 模型数据
                model: {
                    uri: 'model/CesiumAir/Cesium_Air.gltf',
                    minimumPixelSize: 128
                }
            });
        }

        /**
         * 计算飞行
         * @param source 数据坐标
         * @returns {SampledPositionProperty|*}
         */
        function computeFlight(source) {
            // 取样位置 相当于一个集合
            let property = new Cesium.SampledPositionProperty();
            console.log("cesium-computeFlight property" + property)

            for (let i = 0; i < source.length; i++) {
                let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
                let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
                // 添加位置，和时间对应
                property.addSample(time, position);
            }
            return property;
        }
    }





</script>

</body>
</html>